<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能巡检管理平台</title>
    {% load static %}
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="http://43.137.v.113/public/all.min.css">
    <link rel="stylesheet" href="http://43.137.4.113/public/bootstrap/css/bootstrap.min.css">
    <script src="http://43.137.4.113/public/bootstrap/js/jquery.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/jquery-ui.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/popper.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/jquery.validate.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 自定义样式 */
        .navbar-custom {
            background-color: #B0C4DE;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 0.75rem 1.5rem;
        }

        .navbar-brand {
            color: #ffffff !important;
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover {
            transform: scale(1.05);
        }

        .navbar-nav .nav-item {
            margin: 0 8px;
        }

        .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            transition: width 0.3s ease;
        }

        .navbar-nav .nav-link:hover::after {
            width: 100%;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.15);
        }

        .navbar-nav .nav-link i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        /* 移动端菜单样式 */
        @media (max-width: 991.98px) {
            .navbar-nav {
                padding-top: 1rem;
            }

            .navbar-nav .nav-item {
                margin: 4px 0;
            }

            .navbar-nav .nav-link {
                padding: 0.75rem 1.5rem;
            }
        }

        /* 滚动时导航栏变化 */
        .navbar-scrolled {
            background-color: #165DFF;
            padding: 0.5rem 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
                /* 科技灰主题基础样式：从深到浅的灰度层次 */
        .footer {
            background: linear-gradient(180deg, #1E2328 0%, #2D3439 100%); /* 深灰渐变底，增强科技纵深感 */
            color: rgba(255, 255, 255, 0.8);
            padding: 4rem 0 2rem;
            margin-top: auto; /* 固定在页面底部（需配合body flex布局） */
            position: relative;
            overflow: hidden;
        }

        /* 科技感背景装饰：细线条增强工业风 */
        .footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #6C757D, #ADB5BD, #6C757D); /* 浅灰渐变分割线 */
        }

        .footer::after {
            content: "";
            position: absolute;
            top: 10%;
            left: 0;
            width: 100%;
            height: 1px;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 20px, transparent 20px, transparent 40px);
        }

        /* 品牌标识区域：突出平台身份，科技感图标搭配 */
        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 2;
        }

        .footer-brand-logo {
            width: 52px;
            height: 52px;
            background: linear-gradient(145deg, #343A40, #495057); /* 深灰图标底，模拟金属质感 */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-brand-logo i {
            font-size: 26px;
            color: #ADB5BD; /* 浅灰图标色，贴合科技灰主题 */
            transition: color 0.3s ease;
        }

        .footer-brand:hover .footer-brand-logo i {
            color: #FFFFFF; /* hover时图标变白，增强交互感 */
        }

        .footer-brand-name {
            font-size: 1.6rem;
            font-weight: 700;
            color: #FFFFFF;
            letter-spacing: 0.5px;
        }

        .footer-brand-tagline {
            font-size: 0.9rem;
            color: #ADB5BD; /* 浅灰标语，不抢主视觉 */
            margin-top: -0.4rem;
            letter-spacing: 0.2px;
        }

        /* 导航标题：科技感下划线设计 */
        .footer-nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #FFFFFF;
            margin-bottom: 1.3rem;
            position: relative;
            padding-bottom: 0.6rem;
            z-index: 2;
        }

        .footer-nav-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 45px;
            height: 2px;
            background: linear-gradient(90deg, #6C757D, #ADB5BD); /* 浅灰渐变下划线 */
        }

        /* 导航列表：适配运维场景，清晰易读 */
        .footer-nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
            z-index: 2;
        }

        .footer-nav-list li {
            margin-bottom: 0.9rem;
        }

        .footer-nav-list a {
            color: #ADB5BD; /* 浅灰链接色 */
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .footer-nav-list a:hover {
            color: #FFFFFF; /* hover时文字变白 */
            padding-left: 5px; /* 轻微左移，增强交互反馈 */
        }

        .footer-nav-list a i {
            font-size: 0.9rem;
            color: #6C757D; /* 深灰图标，hover时同步变色 */
            transition: color 0.3s ease;
        }

        .footer-nav-list a:hover i {
            color: #FFFFFF;
        }

        /* 联系信息：突出运维紧急需求，信息层级清晰 */
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 1.1rem;
            position: relative;
            z-index: 2;
        }

        .contact-item i {
            color: #ADB5BD; /* 浅灰图标 */
            font-size: 1.2rem;
            margin-top: 2px;
            width: 20px;
            text-align: center;
        }

        .contact-item-content {
            line-height: 1.55;
            font-size: 0.95rem;
        }

        .contact-item-content strong {
            color: #FFFFFF; /* 加粗标题变白，突出关键信息 */
            font-weight: 600;
        }

        /* 社交图标：科技感圆形按钮，hover有金属质感 */
        .social-icons {
            display: flex;
            gap: 1.2rem;
            margin-top: 1.8rem;
            position: relative;
            z-index: 2;
        }

        .social-icon {
            width: 38px;
            height: 38px;
            background: linear-gradient(145deg, #343A40, #495057); /* 深灰渐变底 */
            border-radius: 50%;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ADB5BD;
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            background: linear-gradient(145deg, #495057, #6C757D); /* hover时变浅灰 */
            color: #FFFFFF;
            transform: translateY(-3px) scale(1.05); /* 上浮+微放大，增强科技感交互 */
            box-shadow: 0 5px 12px rgba(0,0,0,0.3);
        }

        /* 版权信息：浅灰底纹，增强层次感 */
        .footer-copyright {
            border-top: 1px solid rgba(255,255,255,0.08); /* 极浅灰分隔线 */
            margin-top: 3.5rem;
            padding-top: 1.8rem;
            font-size: 0.85rem;
            color: #9CA3AF; /* 更浅的灰色，不抢视觉 */
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .footer-copyright p {
            margin-bottom: 0;
            letter-spacing: 0.2px;
        }

        /* 响应式适配：覆盖运维人员常用设备（大屏/平板/手机） */
        @media (max-width: 991.98px) { /* 中等屏幕（平板/小屏电脑） */
            .footer-nav-column {
                margin-bottom: 3rem;
                padding-left: 1rem;
            }
            .footer-brand {
                padding-left: 1rem;
            }
        }

        @media (max-width: 575.98px) { /* 小屏幕（手机，运维现场临时操作） */
            .footer {
                padding: 3rem 0 1.5rem;
            }
            .footer-brand {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
                margin-bottom: 1.2rem;
            }
            .footer-brand-name {
                font-size: 1.4rem;
            }
            .social-icons {
                justify-content: flex-start;
                gap: 1rem;
            }
            .footer-copyright {
                margin-top: 2.5rem;
                padding-top: 1.5rem;
                font-size: 0.8rem;
            }
            .footer-copyright p {
                line-height: 1.6;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-custom">
        <div class="container-fluid">
            <!-- 品牌标识 -->
            <a class="navbar-brand" href="/ai_inspect/">
                <i class="fas fa-binoculars"></i>
                <span>智能巡检管理平台</span>
            </a>

            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNav" aria-controls="navbarNav"
                    aria-expanded="false" aria-label="切换导航">
                <i class="fas fa-bars text-white"></i>
            </button>

            <!-- 菜单内容 -->
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station">
                            <i class="fas fa-house"></i>换电站
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/aibox">
                            <i class="fas fa-video"></i>视频推理机
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/algorithm">
                            <i class="fas fa-cogs"></i>巡检算法
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/inspect_request">
                            <i class="fas fa-clipboard-check"></i>巡检记录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/inspect_result">
                            <i class="fas fa-flag"></i>巡检结果
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<!-- 主要内容块：子模板的核心内容在这里 -->
    <div class="container">
        {% block content %}{% endblock %}
    </div>

        <!-- 科技灰主题页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <!-- 品牌信息列：传递平台身份与核心价值 -->
                <div class="col-lg-4 col-md-6 footer-nav-column">
                    <div class="footer-brand">
                        <div>
                            <div class="footer-brand-name">智能巡检管理平台</div><p></p>
                            <div class="footer-brand-tagline">上海启源芯动力 · 资产管理部充换电站智能运维</div>
                        </div>
                    </div>
                    <p class="text-muted" style="line-height: 1.6; position: relative; z-index: 2;">
                        融合AI视觉识别、物联网与大数据技术，实现充换电站设备状态实时监测、故障自动预警、运维流程数字化，为资产安全高效运行提供全周期技术支撑。
                    </p>
                </div>

                <!-- 平台功能导航列：运维高频操作入口 -->
                <div class="col-lg-2 col-md-3 footer-nav-column">
                    <h4 class="footer-nav-title">平台功能</h4>
                    <ul class="footer-nav-list">
                        <li><i class="fas fa-house"></i><a href="/ai_inspect/station">换电站管理</a></li>
                        <li><i class="fas fa-robot"></i><a href="/ai_inspect/algorithm">巡检算法管理</a></li>
                        <li><i class="fas fa-video"></i><a href="/ai_inspect/aibox">视频推理机管理</a></li>
                        <li><i class="fas fa-clipboard-check"></i><a href="/ai_inspect/inspect_request">巡检记录</a></li>
                        <li><i class="fas fa-flag"></i><a href="/ai_inspect/inspect_result">巡检结果</a></li>
                    </ul>
                </div>

                <!-- 帮助支持导航列：降低运维学习成本 -->
                <div class="col-lg-2 col-md-3 footer-nav-column">
                    <h4 class="footer-nav-title">帮助支持</h4>
                    <ul class="footer-nav-list">
                        <li><i class="fas fa-book"></i><a href="#">操作手册</a></li>
                        <li><i class="fas fa-circle-question"></i><a href="#">常见问题</a></li>
                        <li><i class="fas fa-video"></i><a href="#">视频教程</a></li>
                        <li><i class="fas fa-user-tie"></i><a href="#">技术支持</a></li>
                        <li><i class="fas fa-comments"></i><a href="#">反馈建议</a></li>
                    </ul>
                </div>

                <!-- 联系信息列：运维紧急对接入口 -->
                <div class="col-lg-4 col-md-12 footer-nav-column">
                    <h4 class="footer-nav-title">联系我们</h4>
                    <div class="contact-item">
                        <div class="contact-item-content">
                            <i class="fas fa-location-dot"></i><br>
                            上海市青浦区蟠秀路469弄11号B7栋
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-item-content">
                            <i class="fas fa-phone"></i><br>
                            156-9210-4530（7×24小时运维支持）
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-item-content">
                            <i class="fas fa-envelope"></i><br>
                            lifeng01@cpirhzl.com（技术支持）
                        </div>
                    </div>
                </div>
            </div>

            <!-- 版权信息：企业合规必备 -->
            <div class="footer-copyright">
                <p>© 2025 上海启源芯动力科技有限公司 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html>